<template>
	<om-page :title="pageTitle">
		<view class="om_hd_fix">
			<om-topsearch placeholder="输入姓名、机构、岗位" @confirm="confirm"></om-topsearch>
		</view>
		<view class="page__bd" style="padding-top: 90rpx;">
			<ot-sl-filter :menuList="items" @result="onChangeFilter" bgColor="#eee" style="padding: 0;" />
			<uni-list>
				<view v-for="(item, index) in commonData.datas" :key="index">
					<uni-list-item
						:title="item.userName"
						:note="(item.instName ? item.instName : '') + '-' + (item.posName ? item.posName : '')"
						:data-index="index"
						@click="infoTab(item)"
						:avatar="index + 1"
						:avatarBgColor="getAvatarBgColor(index)"
					>
						<view slot="footer">
							<view v-if="item.unAttendTimes || item.lateTimes || item.earlyTimes">
								<view v-if="item.unAttendTimes">
									<view class="footer-cls">未考勤次数:{{ item.unAttendTimes }}</view>
								</view>
								<view v-if="item.lateTimes">
									<view class="footer-cls">迟到次数:{{ item.lateTimes }}</view>
								</view>
								<view v-if="item.earlyTimes">
									<view class="footer-cls">早退次数:{{ item.earlyTimes }}</view>
								</view>
							</view>
							<view v-else><view class="footer-cls">正常</view></view>
						</view>
					</uni-list-item>
				</view>
			</uni-list>
		</view>
		<tui-loadmore :visible="commonData.loadding"></tui-loadmore>
		<tui-nomore :visible="!commonData.pullUpOn"></tui-nomore>
		<tui-scroll-top :scrollTop="scrollTop" style="background: rgba(124, 174, 255, 0.5)"></tui-scroll-top>
	</om-page>
</template>

<script>
import listLoad from '../../../static/js/listLoad.js';
const app = getApp();
export default {
	data() {
		return {
			logoColors: app.globalData.logoColors,
			scrollTop: 0,
			commonData: {
				query:{
					exFlag:"true",
					matchType:"true",
					searchStr:""
				},
				datas: []
			},
			items: [
				{
					title: '范围',
					key: 'exFlag',
					isMutiple: false,
					defaultSelectedIndex: 1,
					detailList: [
						{
							title: '全部',
							value: 'false'
						},
						{
							title: '异常',
							value: 'true'
						}
					]
				},
				{
					title: '匹配方式',
					isMutiple: false,
					key: 'matchType',
					defaultSelectedIndex: 1,
					detailList: [
						{
							title: '完全匹配',
							value: 'false'
						},
						{
							title: '模糊匹配',
							value: 'true'
						}
					]
				}
			],
			pageTitle:""
		};
	},
	methods: {
		onChangeFilter(val) {
			let _that = this;
			_that.commonData.query.exFlag = val.exFlag;
			_that.commonData.query.matchType = val.matchType;
			listLoad.initData(_that);
		},
		infoTab(item) {
			this.om.getPageInfo(item.infoShow, item.userName + '昨日考勤');
		},
		confirm(e) {
			let s = e.value,
				_that = this;
			_that.commonData.query.searchStr = s;
			listLoad.initData(_that, 'wxAttend/getListAttend');
		},
		getAvatarBgColor(index){
			if(index < 3){
				return this.ColorList[index].name
			}
			if(index < 10){
				return this.ColorList[3].name
			}
			return this.ColorList[4].name
		}
	},
	onLoad(options) {
		this.pageTitle = options.title || '昨日考勤'
		uni.setNavigationBarTitle({
			title: this.pageTitle
		});
		listLoad.initData(this, 'wxAttend/getListAttend');
	},
	onPageScroll(e) {
		let _that = this;
		_that.scrollTop = e.scrollTop;
	},
	//页面相关事件处理函数--监听用户下拉动作
	onPullDownRefresh: function() {
		listLoad.pullDownRefresh(this);
	},

	// 页面上拉触底事件的处理函数
	onReachBottom: function() {
		listLoad.reachBottom(this);
	}
};
</script>

<style></style>
